import React, {Component, Fragment} from 'react';
import {enquireScreen} from 'enquire-js';
import { message } from "antd";
import styles from './index.module.scss';
import BizLinechartsViews from './../BizLinechartsViews';
import MainData from './../MainData';
import "./template/css/style.css";
import './template/css/bootstrap.css';

export default class Index extends Component {
    static displayName = 'Index';

    constructor(props) {
        super(props);
        this.state = {
            isMobile: false,
        };
    }

    componentDidMount() {
        this.enquireScreenRegister();
    }

    enquireScreenRegister = () => {
        const mediaCondition = 'only screen and (max-width: 720px)';

        enquireScreen((mobile) => {
            this.setState({
                isMobile: mobile,
            });
        }, mediaCondition);
    };
    handleClickSubmit() {
        if(document.getElementById("contact_name").value === ""){
            message.error("名称不能为空");
            return;
        }else if(document.getElementById("contact_mail").value === ""){
            message.error("联系方式不能为空");
            return;
        }else if(document.getElementById("contact_content").value === ""){
            message.error("留言不能为空");
            return;
        }
        message.success("提交成功，感谢您的反馈！")
    }
    render() {
        const contentStyle = {
            height: this.state.isMobile ? '300px' : '600px',
        };
        return (
            <Fragment>
                <div className={styles.head} id="flux">
                    <div className={styles._title2}></div>
                </div>
                <div className={styles.container}>
                    <div className={styles.content} style={{...contentStyle}}>
                        <div className={styles.col}>
                            <BizLinechartsViews/>
                        </div>
                        <div className={styles.col}>
                            <MainData />
                        </div>
                    </div>
                </div>

                <div className={styles.head2} id="comment">
                    <div className={styles._title}></div>
                </div>
                <div className="row" style={{marginTop: '80px'}}>
                    <div className="col-md-8 col-md-offset-2 text-center heading-section animate-box">
                        <p>提交建议和意见，我们期待您的声音</p>
                    </div>
                </div>
                <div className="news-scroll" style={{marginTop: '-120px'}}>
                    <div className="scroll-box" style={{color: 'white'}}>
                        <div className="roll">
                            <ul style={{top: "0px"}}>
                                <li className="roll_1">
                                    <a className="ellipsis">增强了我们的知识迁移能力，从实践中检验自己的学习。
                                        <span className="time fr">17级财管2班 王同学</span></a>
                                </li>
                                <li className="roll_2">
                                    <a className="ellipsis">通过实验操作，使我们眼前一亮，让知识运用于实战。
                                        <span className="time fr">16级税务1班 刘同学</span></a>
                                </li>
                                <li className="roll_3">
                                    <a className="ellipsis">让我们感受到企业中财务工作的重要性，丰富我们对实际工作的认知。
                                        <span className="time fr">16级财管3班 杨同学</span></a>
                                </li>
                                <li className="roll_4">
                                    <a className="ellipsis">着实解决了自己实习中难以接触到的核心工作问题。
                                        <span className="time fr">16级经管2班 张同学</span></a>
                                </li>
                                <li className="roll_5">
                                    <a className="ellipsis">实验中含有的政策信息，拓展了我们的眼界。
                                        <span className="time fr">17级金融1班 吴同学</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="fh5co-contact" style={{marginTop: '-100px',marginBottom: '-40px'}}>
                    <div className="container">
                        <form action="#">
                            <div className="row animate-box">
                                <div className="col-md-8 col-md-offset-2">
                                    <div className="row">
                                        <div className="col-md-6">
                                            <div className="form-group">
                                                <input type="text" id="contact_name" className="form-control" placeholder="名称" />
                                            </div>
                                        </div>
                                        <div className="col-md-6">
                                            <div className="form-group">
                                                <input type="text" id="contact_mail" className="form-control" placeholder="邮箱" />
                                            </div>
                                        </div>
                                        <div className="col-md-12">
                                            <div className="form-group">
                                                <textarea name="" className="form-control" id="contact_content" cols="30" rows="7" placeholder="留言"></textarea>
                                            </div>
                                        </div>
                                        <div className="col-md-12" style={{textAlign: 'center'}}>
                                            <div className="form-group">
                                                <span onClick={this.handleClickSubmit} className="btn btn-primary">提交留言</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </Fragment>
        );
    }
}


